<template>
  <div class="goods_combination_details">
    <div class="goods lunbo">
      <div class="aaa">
        <!-- <van-search v-model="value"  /> -->
      </div>
      <van-swipe :autoplay="3000">
        <van-swipe-item
          v-for="(image, index) in images"
          :key="index"
        >

          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      <div class="ddd">
        <div class="good-list">
          <div class="goods-list1">
            <span class="price">${{price}}</span>

            <van-icon name="cash-back-record" />
          </div>
          <div class="good-list-2">
            <div class="title">{{title}}</div>
            <div class="store">
              <span>类型: 2人团 </span>
              <span>累计销量: 2件</span>
              <span>限购: 118件</span>
            </div>
          </div>

        </div>
        <div>
          <YHJ class="yhj"></YHJ>
        </div>
        <div>
          <xiangqing :id="id"></xiangqing>
        </div>
        <div class="yohupjia">
          <span>用户评价(0)</span>
          <span>好评 0% ></span>
        </div>
        <div class="youp">
          <p class="youp111">
            优品推荐
          </p>

          <div class="you-item">
            <van-swipe
              class="my-swipe"
              indicator-color="white"
            >
              <van-swipe-item class="swipt2">
                <div
                  v-for="item in twolist1"
                  :key="item.id"
                >
                  <img
                    :src="item.image"
                    alt=""
                  >
                  <span class="title">{{item.storeName}}</span>
                  <p>{{item.price}}</p>
                </div>
              </van-swipe-item>
              <van-swipe-item class="swipt2">
                <div
                  v-for="item in twolist2"
                  :key="item.id"
                >
                  <img
                    :src="item.image"
                    alt=""
                  >
                  <span class="title">{{item.storeName}}</span>
                  <p>{{item.price}}</p>
                </div>
              </van-swipe-item>

            </van-swipe>
          </div>
        </div>
      </div>
    </div>

    <div class="goods_combination_details-item">
      <div v-html="cont"></div>
    </div>

    <shangp class="shangp" :id="id"></shangp>

  </div>
</template>
<script>

import shangp from "./shanpdaohan.vue"
import axios from "axios"
import xiangqing from "./xiangqing.vue"
import YHJ from "../../../components/youhuijuan/YHJ.vue"
export default {
  data() {
    return {
      id: this.$route.query.id,
      images: [],
      price: '',
      otPrice: '',
      title: '',
      show: false,
      active: 0,
      list: [],
      youping: [],
      twolist: [],
      twolist1: [],
      twolist2: [],
      cont: "",
      value: '',
    }
  },
  
  created() {
    console.log(this.$route.query.id);
    this.getxianqin()
    this.getCoupons()
    this.getgoods()

  },
  methods: {
    showPopup() {
      this.show = true;
    },
    async getxianqin() {
      const res = await this.$http.getxianqin(this.id)
      console.log(res.data.data);
      this.images = JSON.parse(res.data.data.productInfo.sliderImage)
      this.price = res.data.data.productInfo.price
      this.otPrice = res.data.data.productInfo.otPrice
      this.title = res.data.data.productInfo.storeName
      this.cont = res.data.data.productInfo.content


      console.log((Object(this.cont)));
      Object.keys(this.cont)
    },
    async getCoupons() {
      const res = await this.$http.getCoupons()
      this.list = res.data.data

    },
    getgoods() {
      axios.get("https://api.java.crmeb.net/api/front/product/good").then(res => {

        this.twolist = res.data.data.list
        this.twolist1 = this.twolist.slice(0, 6)
        this.twolist2 = this.twolist.slice(6, 8)
        console.log(this.twolist2);
      })
    }
  },
  components: {
    YHJ,
    xiangqing,
    shangp
  }
}
</script>
<style lang="scss" >
* {
  margin: 0;
  padding: 0;
}
.goods_combination_details {
  box-sizing: border-box;
  .ddd {
    background-color: #cccccc40;
  }
  .aaa {
    position: absolute;
    z-index: 999;
  }
  .goods-list1 {
    width: 94%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: auto;
    box-sizing: border-box;
    font-size: 30px;
    color: red;
    background-color: white;
  }
  .good-list-2 {
    width: 94%;
    height: 80px;
    box-sizing: border-box;
    margin: auto;
    padding: 10px;
    background-color: white;
    .title {
      font-weight: bold;
      margin-bottom: 10px;
    }
    .store {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #ccc;
    }
  }
  .yhj {
    width: 94%;
    margin: auto;
    margin-bottom: 20px;
  }
  .xiangq {
    width: 94%;
    height: 100px;
    padding: 10px;
    background-color: white;
    margin: auto;
    box-sizing: border-box;
  }
  .yohupjia {
    display: flex;
    justify-content: space-between;
    background-color: white;
    width: 94%;
    height: 40px;
    line-height: 20px;
    box-sizing: border-box;
    margin: auto;
    font-size: 18px;
    padding: 10px;
    margin-top: 15px;
    color: #ccc;
  }
  .youp {
    width: 94%;
    background-color: white;
    margin: auto;
    box-sizing: border-box;
    margin-top: 15px;
    text-align: center;
    .youp111 {
      height: 40px;
      line-height: 40px;
    }
  }
  .van-swipe-item {
    img {
      // width: 100%;
      height: 414px;
      display: block;
    }
  }

  .lqyhq {
    .lqyhq-item {
      // width: 100%;
      height: 100px;

      border-radius: 7px;
      position: relative;
      margin-top: 10px;
      display: flex;

      .yhq-l {
        width: 130px;
        height: 70px;
        border-radius: 7px 0 0 7px;
        text-align: center;
        color: white;
        background-color: red;
        font-size: 19px;
        p {
          font-size: 20px;
          margin-bottom: 5px;
          font-weight: bold;
          margin-top: 10px;
        }
      }
      .yhq-r {
        width: 70%;
        text-align: center;
        height: 70px;
        background-color: white;
        color: red;
        padding-top: 10px;
        box-sizing: border-box;
        border-radius: 0 7px 7px 0;
      }
    }
  }
  .van-swipe__track {
    .swipt2 {
      display: flex;
      flex-wrap: wrap;
      img {
        width: 100px;
        height: 100px;
        margin-left: 10px;
      }
      .title {
        width: 100px;
        height: 20px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        margin-left: 10px;
      }
      p {
        margin-left: 10px;
      }
    }
  }

  .goods_combination_details-item {
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.shangp {
  position: absolute;
  z-index: 99999;
}
</style>